<template>
  <div class="form_wrap">
    <el-row :gutter='30'>
      <template v-for="formItem in formRule">
        <el-col :span="8">
          <form-item
            :data = formItem
            @forminput = 'update'
          ></form-item>
        </el-col>
      </template>
      <el-col :span="4">
        <el-button type="primary" size="large" @click='submit'>{{btntext}}</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import formItem from 'components/formItem.vue'
  import {
    formTranslate
  } from 'src/model/form.translate.js'
  export default {
    props: {
      'formRule': [Array],
      'btntext': {
        type: String,
        default: '搜索'
      }
    },
    created () {
      // 建立表单模型
      this.formModel = formTranslate(this.formRule)
      this.$emit('formsubmit', this.formModel)
    },
    data () {
      return {
        formModel: {}
      }
    },
    methods: {
      submit () {
        this.$emit('formsubmit', this.formModel)
      },
      update (obj) {
        this.formModel = Object.assign(this.formModel, obj)
      }
    },
    components: {
      formItem
    }
  }
</script>
